<template>
	<div>
		<div v-if="!showDetail" class="game-container report-container">
			<div class="params">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item label="结算时间:" prop="time">
						<el-date-picker
							v-model="queryData.time"
							:default-time="defaultTime"
							:disabled="loading"
							:picker-options="pickerOptions"
							align="right"
							:end-placeholder="$t('common.end_date')"
							range-separator="-"
							size="medium"
							:start-placeholder="$t('common.start_date')"
							type="datetimerange"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.order_no')}:`"
						prop="orderNo"
					>
						<el-input
							v-model="queryData.orderNo"
							:disabled="loading"
							clearable
							:placeholder="$t('common.please_enter')"
							size="medium"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.lock_status')}:`"
						prop="lockStatus"
					>
						<el-select
							v-model="queryData.lockStatus"
							:disabled="loading"
							:popper-append-to-body="false"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option
								:value="undefined"
								:label="$t('common.all')"
							></el-option>
							<el-option
								v-for="item in lockOrderType"
								:key="item.code"
								:label="item.description"
								:value="Number(item.code)"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="审核员:" prop="auditOperator">
						<el-input
							v-model="queryData.auditOperator"
							:disabled="loading"
							clearable
							:placeholder="$t('common.please_enter')"
							size="medium"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-left: 8px">
						<el-button
							:disabled="loading"
							icon="el-icon-search"
							size="medium"
							type="primary"
							@click="search"
						>
							查询
						</el-button>
						<el-button
							:disabled="loading"
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset('form')"
						>
							重置
						</el-button>
					</el-form-item>
					<div class="divBox">
						<p class="danger data-refresh">
							{{ $t('funds.fund_audit.data_update_time') }}：
							{{ now }}
						</p>
						<el-select
							v-model="activeWithdrawal"
							:disabled="loading"
							:placeholder="$t('common.please_choose')"
							size="mini"
							@change="recordTime"
						>
							<el-option
								v-for="item in timeList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</div>
				</el-form>
			</div>
			<div class="view-container dealer-container">
				<div
					v-if="hasPermission('1030711') || hasPermission('1030712')"
					class="content"
				>
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane
							v-if="hasPermission('1030711')"
							:label="$t('funds.fund_audit.wait_audit_1')"
							name="0"
						></el-tab-pane>

						<el-tab-pane
							v-if="hasPermission('1030712')"
							:label="$t('funds.fund_audit.wait_audit_2')"
							name="1"
						></el-tab-pane>
					</el-tabs>
					<el-table
						v-loading="loading"
						:data="dataList"
						:header-cell-style="getRowClass"
						border
						class="small-size-table"
						element-loading-spinner="el-icon-loading"
						size="mini"
						style="width: 100%"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.lock')"
							width="60"
						>
							<template slot-scope="scope">
								<el-checkbox
									v-model="scope.row.lockOrder"
									:disabled="
										scope.row.lockAccount !== name &&
											scope.row.lockOrder
									"
									@change="lockChange(scope.row)"
								></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.actions')"
							width="180"
						>
							<template slot-scope="scope">
								<el-button
									:class="
										scope.row.lockAccount !== name
											? 'dis'
											: ''
									"
									size="medium"
									type="primary"
									@click="goDetail(scope.row)"
								>
									{{ '审核' }}
								</el-button>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="审核员"
							prop="auditOperator"
							width="220"
						>
							<template slot-scope="scope">
								{{ scope.row.lockAccount || '--' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.order_no')"
							prop="orderNo"
							width="220"
						>
							<template slot-scope="scope">
								{{ scope.row.orderNo || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.top_proxy_name')"
							prop="proxyAccount"
							width="150"
						>
							<template slot-scope="scope">
								{{ scope.row.proxyAccount || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="结算时间"
							min-width="220"
							prop="settlementTime"
						>
							<template slot-scope="scope">
								{{ scope.row.settlementTime || '--' }}
							</template>
						</el-table-column>
						<el-table-column align="center" min-width="180">
							<template slot="header">
								<div>预结算冲正后净盈亏</div>
								<div>预结算平台分润</div>
							</template>
							<template slot-scope="scope">
								<div>
									{{
										decimalToFixed2(
											scope.row.budgetAdjustRushAmount
										) || '0.00'
									}}
								</div>
								<div>
									{{
										decimalToFixed2(
											scope.row.budgetPlatFee
										) || '0.00'
									}}
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" min-width="180">
							<template slot="header">
								<div>最终结算冲正后净盈亏</div>
								<div>最终结算平台分润</div>
							</template>
							<template slot-scope="scope">
								<div>
									{{
										decimalToFixed2(
											scope.row.adjustRushAmount
										) || '0.00'
									}}
								</div>
								<div>
									{{
										decimalToFixed2(scope.row.platFee) ||
											'0.00'
									}}
								</div>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="结算类型"
							min-width="220"
							prop="countStatus"
						>
							<template slot-scope="scope">
								{{
									scope.row.countStatus === 0
										? '预结算'
										: '最终结算'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.audit_status')"
							width="150"
						>
							<template slot-scope="scope">
								{{
									activeName === '0'
										? scope.row.auditStatus === 0
											? '待一审'
											: '一审审核'
										: scope.row.auditStatus === 0
										? '待二审'
										: '二审审核'
								}}
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<el-pagination
						:current-page.sync="pageNum"
						:disabled="loading"
						:page-size="pageSize"
						:page-sizes="pageSizes"
						:total="total"
						background
						class="pageValue"
						layout="total, sizes,prev, pager, next, jumper"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
					></el-pagination>
				</div>
				<el-empty v-else></el-empty>
			</div>
		</div>
		<detail
			v-else
			:activeName="activeName"
			:rowData="rowData"
			:type="type"
			@goBack="goBack"
		></detail>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername } from '@/utils/auth'
import { routerNames } from '@/utils/consts'

const end = dayjs()
	.endOf('day')
	.valueOf()
const start = dayjs()
	.startOf('month')
	.valueOf()

export default {
	name: routerNames.memberWithdrawalReview,
	components: { detail: () => import('./components/detail') },
	mixins: [list],
	data() {
		return {
			queryData: {
				time: [start, end],
				orderNo: undefined,
				lockStatus: undefined, // 锁单
				auditOperator: '' // 审核员
			},
			type: true,
			showDetail: false,
			rowData: {},
			row: {},
			action: '',
			show: false,
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			name: '',
			activeName: '',
			dataList: [],
			pictureDialogVisible: false,
			timeList: [],
			memberWithdrawalTimer: null,
			activeWithdrawal: this.$t('funds.fund_audit.no_reload')
		}
	},
	computed: {
		lockOrderType() {
			return this.globalDics.lockOrderType || []
		}
	},
	created() {
		this.getKvconfigList()
		if (this.hasPermission('1030711')) {
			this.activeName = '0'
		} else if (this.hasPermission('1030712')) {
			this.activeName = '1'
		} else {
			this.activeName = ''
		}
		this.name = getUsername()
	},
	activated() {
		if (Number(this.activeWithdrawal)) {
			this.memberWithdrawalTimer = setInterval(
				this.activeWithdrawal * 1000
			)
		} else {
			clearInterval(this.memberWithdrawalTimer)
		}
	},
	deactivated() {
		clearInterval(this.memberWithdrawalTimer)
	},
	beforeDestroy() {
		clearInterval(this.memberWithdrawalTimer)
		this.memberWithdrawalTimer = null
	},
	methods: {
		search() {
			this.pageNum = 1
			clearInterval(this.memberWithdrawalTimer)
			this.memberWithdrawalTimer = null
			if (Number(this.activeWithdrawal)) {
				this.memberWithdrawalTimer = setInterval(
					this.loadData,
					this.activeWithdrawal * 1000
				)
			}
			this.loadData()
		},
		recordTime(val) {
			this.activeWithdrawal = val
			if (Number(val)) {
				clearInterval(this.memberWithdrawalTimer)
				this.memberWithdrawalTimer = setInterval(
					this.loadData,
					val * 1000
				)
			} else {
				clearInterval(this.memberWithdrawalTimer)
			}
		},
		getKvconfigList() {
			this.timeList = []
			let str = ''
			let arr = []
			const params = {
				k: 'funds.audit.pagerefresh.interval.config',
				pageNum: 1,
				pageSize: 10
			}
			this.$api.getkvconfigQueryList(params).then((res) => {
				if (res.code === 200 && res.data) {
					const val = res.data.records[0] || []
					if (val.v) {
						str = val.v
						arr = str.split(',').sort()
						arr.forEach((item, index) => {
							const obj = {}
							if (Number(item) === 0) {
								obj.label = this.$t(
									'funds.fund_audit.no_reload'
								)
								obj.value = this.$t(
									'funds.fund_audit.no_reload'
								)
								this.timeList.push(obj)
								this.activeWithdrawal = this.$t(
									'funds.fund_audit.no_reload'
								)
								this.memberWithdrawalTimer = null
							} else if (Number(item)) {
								obj.label =
									item + this.$t('funds.fund_audit.second')
								obj.value = item
								this.timeList.push(obj)
							}
							// if (Number(item) && index === 1) {
							// 	this.activeWithdrawal = item
							// 	this.memberWithdrawalTimer = setInterval(
							// 		this.loadData,
							// 		item * 1000
							// 	)
							// }
						})
					}
				}
			})
		},
		// tabs 切换
		handleClick() {
			this.dataList = []
			this.search()
		},
		// 页面请求数据
		loadData() {
			if (!this.activeName) return
			this.loading = true
			const [startTime, endTime] = this.queryData.time || []
			let params = {
				orderNo: this.queryData.orderNo,
				lockStatus: this.queryData.lockStatus,
				auditOperator: this.queryData.auditOperator,
				startSettlementTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				endSettlementTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}

			let type
			if (this.activeName === '0') {
				type = 'proxyHolderFeeAuditSelectFirstAudit'
			} else if (this.activeName === '1') {
				type = 'proxyHolderFeeAuditSelectSecondAudit'
			} else {
				this.loading = false
				return false
			}

			this.$api[type](params)
				.then((res) => {
					// res = this.mockData
					this.loading = false
					if (res?.code === 200) {
						this.now = dayjs(new Date()).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						this.dataList = res?.data?.record
						if (this.dataList) {
							this.dataList.forEach((item) => {
								item.lockOrder = Number(item.lockStatus) === 1
							})
						}
						this.total = res?.data?.totalRecord
					} else {
						this.loading = false
						this.$message({
							message: res?.msg || '接口请求异常',
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 显示详情页面
		goDetail(row) {
			this.type = row.lockAccount === this.name
			this.rowData = row
			this.showDetail = true
		},
		// 退出详情页面
		goBack() {
			this.showDetail = false
			this.dataList = []
			this.search()
		},
		// 重置
		reset(item) {
			this.$refs[item].resetFields()
			this.search()
		},
		//  分页每页多少条数据
		handleCurrentChange(val) {
			this.pageNum = val
			clearInterval(this.memberWithdrawalTimer)
			this.memberWithdrawalTimer = null
			if (Number(this.activeWithdrawal)) {
				this.memberWithdrawalTimer = setInterval(
					this.loadData,
					this.activeWithdrawal * 1000
				)
			}
			this.loadData()
		},
		//  分页下一页
		handleSizeChange(val) {
			this.pageSize = val
			clearInterval(this.memberWithdrawalTimer)
			this.memberWithdrawalTimer = null
			if (Number(this.activeWithdrawal)) {
				this.memberWithdrawalTimer = setInterval(
					this.loadData,
					this.activeWithdrawal * 1000
				)
			}
			this.loadData()
		},
		// 锁单
		lockChange(val) {
			this.loading = true
			const params = {
				proxyId: val.proxyId,
				reportYm: val.reportYm,
				lockStatus: val.lockStatus ? 0 : 1
			}
			this.$api
				.proxyHolderFeeAuditLock(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.$message({
							type: 'success',
							message: this.$t('common.action_success')
						})
						this.loadData()
					} else {
						this.$message({
							message: res?.msg || '接口请求异常',
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loadData()
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}

::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.divBox {
	display: flex;

	.el-select {
		width: 100px;
	}
}

.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
	line-height: 28px;
	margin-right: 20px;
}

::v-deep .el-form-item__error {
	left: 0;
}

.remakeBox {
	width: 250px;
	position: absolute;
	left: 200px;
	bottom: 0;
	line-height: 20px;
}
</style>
